<template>
    <div>
        <Echart width="400px" height="200px" :config="config" refName="qushi" ref="chart"></Echart>
    </div>
</template>
<script>
import Echart from "@/common/index.vue"
import { option } from "@/components/rightTop/index"
import { Data } from "@/mockData/dayData.js"
export default {
    data() {
        return {
            config: null,
            Data: Data(),
            startIndex: 0,
            endIndex: 8,
            instance: null,
            time: null
        }
    },
    components: {
        Echart
    },
    methods: {
        handlerUpdate() {
            let DataLength = this.Data.length
            let InitData = this.Data.slice(this.startIndex, this.endIndex)
            let xAxis = InitData.map((item) => item.name)
            let seriesData = InitData.map((item) => item.value)
            this.config.xAxis.data = xAxis
            this.config.series[0].data = seriesData
            this.startIndex++
            this.endIndex++
            if (this.endIndex > DataLength) {
                this.startIndex = 0
                this.endIndex = 8
            }
        },
        getEchartsInstance() {
            this.instance = this.$refs.chart.getData();
        },
        handlerEvent() {
            this.instance.on("mouseover", () => {
                clearInterval(this.time)
            })
            this.instance.on("mouseout", () => {
                this.timeEvent()
            })
        },
        timeEvent() {
            this.time = setInterval(() => {
                this.handlerUpdate()
            }, 1500)
        }
    },
    created() {
    },
    mounted() {
        this.getEchartsInstance()
        this.config = option.call(this)
        this.handlerUpdate()
        this.handlerEvent()
        this.timeEvent()
    },
}
</script>
<style lang="less" scoped>

</style>
